<template>
    <div class="h-100 p-b-20">
        <Form class="p-20 ov-scroll" ref="form" :rules="modal.rules" :model="modal.data" :label-width="180">
			<#list columns as po>
				<#if po.isShowForm == 'Y'>
					<#if po.showType == 'textarea'>
                            <FormItem class="w-80" label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" type="textarea" :autosize="{minRows: 4,maxRows: 6}" placeholder="请输入${po.description}"></Input>
                            </FormItem>
					<#elseif po.showType == 'password'>
                            <FormItem class="w-80" label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" type="password" placeholder="请输入${po.description}"></Input>
                            </FormItem>
                            <FormItem class="w-80" label="确认${po.description}：" prop="confirmPassword">
                                <Input v-model="modal.data.confirmPassword" type="password" placeholder="请再次输入${po.description}"></Input>
                            </FormItem>
					<#elseif po.showType == 'date'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <CwDatePicker v-model="modal.data.${po.fieldName}" type="datetime" placeholder="请选择${po.description}" />
                            </FormItem>
					<#elseif po.showType == 'select'>
                            <FormItem class="w-50" label="${po.description}：" prop="${po.fieldName}">
                                <Select v-model="modal.data.${po.fieldName}" clearable placeholder="请选择${po.description}">
                                    <Option value="0">选项1</Option>
                                    <Option value="1">选项2</Option>
                                    <Option value="2">选项3</Option>
                                </Select>
                            </FormItem>
					<#elseif po.showType == 'radio'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <Switch v-model="modal.data.${po.fieldName}" true-value="1" false-value="0" />
                            </FormItem>
					<#elseif po.showType == 'checkbox'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <CheckboxGroup v-model="modal.data.${po.fieldName}">
                                    <Checkbox label="选项1"></Checkbox>
                                    <Checkbox label="选项2"></Checkbox>
                                    <Checkbox label="选项3"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                    <#elseif po.showType == 'photo'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <PhotoUpload v-model="modal.data.${po.fieldName}" />
                            </FormItem>
                    <#elseif po.showType == 'number'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <InputNumber v-model="modal.data.${po.fieldName}" placeholder="${po.description}"></InputNumber>
                            </FormItem>
                    <#else>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" placeholder="${po.description}">
                            </FormItem>
                    </#if>
				</#if>
			</#list>
            <Row :gutter="20">
                <Col span="12">
                <Button type="success" long @click="createData()" :loading="modal.loading">提交</Button>
                </Col>
                <Col span="12">
                <Button long @click="goBack()">返回</Button>
                </Col>
            </Row>
        </Form>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { options } from '../options'
    import { util } from '@/libs'
    import { config } from '@/config'
    import PhotoUpload from '@/components/libs/PhotoUpload'
    export default {
        components: { PhotoUpload },
        data() {
            const _init = {}
            <#list columns as po>
                <#if po.isShowForm=='Y' && po.formValidType=='1' && po.showType=='password'>
                    const ${po.fieldName}Confirm = (rule, value, callback) => {
                    if (value === this.modal.data.password) callback()
                    callback(new Error('两次密码输入不一致！'))
                }
                </#if>
            </#list>
            return {
                options,
                modal: {
                    loading: false,
                    rules: {
                        <#list columns as po>
                            <#if po.isShowForm=='Y'>
                                <#if po.formValidType=='1'>
                                    ${po.fieldName}: [
                                        <#if po.showType == 'password'>
                                        { pattern: config.pattern.pass, message: '大于6位数字或英文字母', trigger: 'blur' }
                                        </#if>
                                    {
                                        required: true,
                                        message: '必填项',
                                    <#if po.fieldType == 'Date'>
                                        trigger: 'blur, change',
                                        validator(rule, value, callback) {
                                            value ? callback() : callback(new Error('${po.description}为必填项'))
                                        },
                                    <#elseif po.showType == 'number'>
                                        type: 'number',
                                        trigger: 'blur'
                                    <#else>
                                        trigger: 'blur'
                                    </#if>
                                    }],
                                    <#if po.showType == 'password'>
                                        ${po.fieldName}Confirm: [{ required: true, validator: ${po.fieldName}Confirm, trigger: 'blur' }],
                                    </#if>
                                </#if>
                            </#if>
                        </#list>
                    },
                    data: _init
                }
            }
        },
        computed: {
            ...mapState({
                    data: state => state.${className?uncap_first}.data,
            })
        },
        created() {
            this.$store.dispatch('/${className?uncap_first}').then(() => {
                if (this.$route.query.id) this.getDetails(this.$route.query.id)
            })
        },
        methods: {
            getDetails(id) {
                this.$store.dispatch('/Get${className}', { id }).then(() => (this.modal.data = util.deepcopy(this.data)))
            },
            createData() {
                this.modal.loading = true
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$store.dispatch('/Update${className}', this.modal.data).then(() => this.goBack())
                        .finally(() => (this.modal.loading = false))
                    } else {
                        this.modal.loading = false
                    }
                })
            },
            goBack() {
                this.$router.push({ path: '/system/${className?uncap_first}' })
            }
        }
    }
</script>
